import {
  getPickingTaskByPage,
  addPickingTask,
  updatePickingTask,
  exportPickingTask,
  getPickingDetailsByPageLike,
} from '@/services/product/pickingTask';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Tabs } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useRef, useState } from 'react';
import PickingDetails from './pickingDetails';
import { Ellipsis } from '@/components/Ellipsis';
import { tableSearchPublicConfig } from '@/utils/filterUtils';
const PickingTask: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const detailRef = useRef(null);
  const [pickingTaskCode, setPickingTaskCode] = useState();
  const [findPickingValue, setFindPickingValue] = useState<string>();
  const ref = useRef(null);

  const columnsFinished: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      sorter: true,
      valueType: 'index',
      width: 80,
    },
    {
      title: '项目编号',
      align: 'center',
      sorter: true,
      dataIndex: 'projectCode',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目名称',
      align: 'center',
      sorter: true,
      dataIndex: 'projectName',
      width: 200,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '当前批次编号',
      align: 'center',
      sorter: true,
      dataIndex: 'currentBatchCode',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '工单编号',
      align: 'center',
      sorter: true,
      dataIndex: 'wo',
      width: 180,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '工单描述',
      align: 'center',
      sorter: true,
      dataIndex: 'woDesc',
      width: 150,
      hideInTable: true, //后端API没有传数据
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '分料完成时间',
      align: 'center',
      sorter: true,
      dataIndex: 'pickingFinishTime',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '任务状态',
      align: 'center',
      sorter: true,
      dataIndex: 'pickingState',
      width: 100,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '分料任务号',
      align: 'center',
      sorter: true,
      dataIndex: 'pickingTaskCode',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '计划完成时间',
      align: 'center',
      sorter: true,
      dataIndex: 'planFinishTime',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '柜体编号',
      dataIndex: 'productCode',
      align: 'center',
      sorter: true,
      width: 180,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '柜体类型编号',
      align: 'center',
      sorter: true,
      dataIndex: 'productType',
      width: 150,
      render: (text) => <>{Ellipsis(text)}</>,
      hideInTable: true,
    },
    {
      title: '柜体类型',
      align: 'center',
      sorter: true,
      dataIndex: 'productTypeName',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      align: 'center',
      sorter: true,
      dataIndex: 'createTime',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      align: 'center',
      sorter: true,
      dataIndex: 'createName',
      width: 150,

      render: (text) => <>{Ellipsis(text)}</>,
    },
  ];
  const handleSubmit = async (values) => {
    setConfirmLoading(true);
    if (formTitle == '新建') {
      const result = await addPickingTask(values);
      if (result != null) {
        message.success('添加成功');
      }
    } else {
      await updatePickingTask(values);
    }
    setConfirmLoading(false);
    setModalVisit(false);
    actionRef.current!.reload();
  };

  const findPickingDetails = async () => {
    const data = {
      like: findPickingValue,
      pickingTaskCode: pickingTaskCode,
    };
    const result = await getPickingDetailsByPageLike(data, {
      page: 1,
      pageSize: 20,
      sorters: [],
      filters: [],
    });
    console.log(result, 'result');
  };

  return (
    <>
      <ProTable
        onRow={(record) => ({
          onClick: () => {
            setPickingTaskCode(record.pickingTaskCode);
          },
        })}
        search={{
          labelWidth: 100,
          ...tableSearchPublicConfig,
        }}
        headerTitle="分料任务查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              const filters = filterTran(ref.current!.getFieldsValue());
              exportPickingTask({
                current: 1,
                pageSize: 5000,
                filters: filters,
              }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `PickingTask.xlsx`);
                aLink.click();
                document.body.removeChild(aLink);
              });
            }}
            type="primary"
          >
            导出
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTran(params);
          const result = await getPickingTaskByPage({
            ...params,
            sorters: sorters,
            filters: filters,
          });
          const temp = result.data.content.filter((item) => {
            return item.pickingState === '未领物料';
          });
          result.data.content.map((item: any) => {
            item.createTime = item.createTime.split(' ')[0]; //处理日期，只保留到日
          });
          return {
            data: temp,
            total: temp.length,
            success: result.success,
          };
        }}
        columns={columnsFinished}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
      />
      <PickingDetails pickingTaskCode={pickingTaskCode} ref={detailRef} />
    </>
  );
};
export default PickingTask;
